<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示 - 企业官网</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="logo">
                <h1>品牌名称</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="services.html">服务项目</a></li>
                    <li><a href="products.html" class="active">产品展示</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
            <div class="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="page-header">
        <div class="container">
            <h1>产品展示</h1>
            <p>探索我们的创新产品和解决方案</p>
        </div>
    </section>

    <!-- 产品分类 -->
    <section class="products-filter">
        <div class="container">
            <ul class="filter-categories">
                <li class="active" data-filter="all">全部产品</li>
                <li data-filter="software">软件产品</li>
                <li data-filter="hardware">硬件产品</li>
                <li data-filter="solution">解决方案</li>
            </ul>
        </div>
    </section>

    <!-- 产品展示 -->
    <section class="products-showcase">
        <div class="container">
            <div class="products-grid">
                <!-- 软件产品 -->
                <div class="product-card" data-category="software">
                    <div class="product-image">
                        <img src="images/product1.jpg" alt="产品1">
                        <div class="product-overlay">
                            <a href="#" class="btn-view">查看详情</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3>企业管理系统</h3>
                        <p>一站式企业管理解决方案，提升运营效率</p>
                        <div class="product-features">
                            <span>定制化</span>
                            <span>云部署</span>
                            <span>多平台</span>
                        </div>
                    </div>
                </div>

                <div class="product-card" data-category="software">
                    <div class="product-image">
                        <img src="images/product2.jpg" alt="产品2">
                        <div class="product-overlay">
                            <a href="#" class="btn-view">查看详情</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3>客户关系管理系统</h3>
                        <p>高效管理客户资源，提升客户满意度</p>
                        <div class="product-features">
                            <span>数据分析</span>
                            <span>自动化</span>
                            <span>移动端</span>
                        </div>
                    </div>
                </div>

                <!-- 硬件产品 -->
                <div class="product-card" data-category="hardware">
                    <div class="product-image">
                        <img src="images/product3.jpg" alt="产品3">
                        <div class="product-overlay">
                            <a href="#" class="btn-view">查看详情</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3>智能工业控制器</h3>
                        <p>先进的工业自动化控制设备</p>
                        <div class="product-features">
                            <span>高精度</span>
                            <span>稳定性强</span>
                            <span>远程控制</span>
                        </div>
                    </div>
                </div>

                <div class="product-card" data-category="hardware">
                    <div class="product-image">
                        <img src="images/product4.jpg" alt="产品4">
                        <div class="product-overlay">
                            <a href="#" class="btn-view">查看详情</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3>IOT传感器套件</h3>
                        <p>全方位物联网数据采集解决方案</p>
                        <div class="product-features">
                            <span>低功耗</span>
                            <span>高集成</span>
                            <span>易部署</span>
                        </div>
                    </div>
                </div>

                <!-- 解决方案 -->
                <div class="product-card" data-category="solution">
                    <div class="product-image">
                        <img src="images/product5.jpg" alt="产品5">
                        <div class="product-overlay">
                            <a href="#" class="btn-view">查看详情</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3>智慧城市解决方案</h3>
                        <p>城市公共设施智能化管理平台</p>
                        <div class="product-features">
                            <span>数据可视化</span>
                            <span>AI分析</span>
                            <span>安全可靠</span>
                        </div>
                    </div>
                </div>

                <div class="product-card" data-category="solution">
                    <div class="product-image">
                        <img src="images/product6.jpg" alt="产品6">
                        <div class="product-overlay">
                            <a href="#" class="btn-view">查看详情</a>
                        </div>
                    </div>
                    <div class="product-info">
                        <h3>智能制造解决方案</h3>
                        <p>生产流程自动化与优化系统</p>
                        <div class="product-features">
                            <span>生产监控</span>
                            <span>质量管理</span>
                            <span>流程优化</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品特点 -->
    <section class="product-features-section">
        <div class="container">
            <h2 class="section-title">产品特点</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <i class="fas fa-shield-alt"></i>
                    <h3>安全可靠</h3>
                    <p>多层安全防护机制，保障数据安全</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-tachometer-alt"></i>
                    <h3>高性能</h3>
                    <p>优化的系统架构，提供卓越性能</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-sync-alt"></i>
                    <h3>灵活扩展</h3>
                    <p>模块化设计，轻松扩展功能</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-headset"></i>
                    <h3>技术支持</h3>
                    <p>专业团队提供全面技术支持</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 成功案例 -->
    <section class="case-studies">
        <div class="container">
            <h2 class="section-title">成功案例</h2>
            <div class="cases-grid">
                <div class="case-card">
                    <img src="images/case1.jpg" alt="案例1">
                    <h3>某大型制造企业</h3>
                    <p>通过我们的智能制造解决方案，生产效率提升40%，不良品率降低50%</p>
                </div>
                <div class="case-card">
                    <img src="images/case2.jpg" alt="案例2">
                    <h3>某城市管理部门</h3>
                    <p>应用我们的智慧城市平台，实现公共设施智能化管理，节省运营成本30%</p>
                </div>
                <div class="case-card">
                    <img src="images/case3.jpg" alt="案例3">
                    <h3>某互联网公司</h3>
                    <p>部署我们的客户关系管理系统，客户满意度提升35%，销售转化率提升28%</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 常见问题 -->
    <section class="faq-section">
        <div class="container">
            <h2 class="section-title">常见问题</h2>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>如何选择适合的产品？</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>我们提供免费的需求咨询服务，您可以联系我们的客服团队，根据您的具体需求，我们会推荐最适合的产品或解决方案。</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>产品是否支持定制？</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>是的，我们的大部分产品都支持定制开发，可以根据您的特定需求进行功能调整和扩展，以满足您的业务需求。</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>提供哪些售后服务？</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>我们提供全面的售后服务，包括产品安装部署、技术培训、故障排除、系统升级和维护等，确保您的系统稳定运行。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-preview">
        <div class="container">
            <h2 class="section-title">对我们的产品感兴趣？</h2>
            <p>请联系我们获取更多详细信息或预约产品演示</p>
            <a href="contact.html" class="btn">立即咨询</a>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <h3>品牌名称</h3>
                    <p>提供专业的企业解决方案</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="services.html">服务项目</a></li>
                        <li><a href="products.html">产品展示</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系方式</h3>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区XX大厦</li>
                        <li><i class="fas fa-phone"></i> (010) 12345678</li>
                        <li><i class="fas fa-envelope"></i> contact@example.com</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 品牌名称. 保留所有权利</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script>
        // 产品筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const filterBtns = document.querySelectorAll('.filter-categories li');
            const productCards = document.querySelectorAll('.product-card');
            
            filterBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // 移除所有按钮的活跃状态
                    filterBtns.forEach(b => b.classList.remove('active'));
                    // 添加当前按钮的活跃状态
                    btn.classList.add('active');
                    
                    const filter = btn.getAttribute('data-filter');
                    
                    productCards.forEach(card => {
                        if (filter === 'all' || card.getAttribute('data-category') === filter) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    });
                });
            });
            
            // FAQ折叠功能
            const faqQuestions = document.querySelectorAll('.faq-question');
            
            faqQuestions.forEach(question => {
                question.addEventListener('click', () => {
                    const faqItem = question.parentElement;
                    faqItem.classList.toggle('active');
                    
                    // 关闭其他已打开的FAQ
                    document.querySelectorAll('.faq-item').forEach(item => {
                        if (item !== faqItem && item.classList.contains('active')) {
                            item.classList.remove('active');
                        }
                    });
                });
            });
        });
    </script>
</body>
</html> 